<template>
  <el-button
    v-has="'create'"
    type="primary"
  >
    添加
  </el-button>
  <global-table
    :table-data="tableData"
    :row-header="rowHeader"
    :has-border="true"
    :has-select-all="true"
    :has-reserve="false"
    :has-index="true"
    :has-option="true"
    :add-btn-list="addBtnList"
    :has-pagination="true"
    :page-num="queryInfo.pageNum"
    :page-size="queryInfo.pageSize"
    :put-total="total"
    :loading="loading"
    :refresh-table="refreshTable"
    :expand-all="false"
    :select-row="selectRow"
    @select-all-data="selectAllData"
    @sort-change="sortChange"
    :handle-size-change="handleSizeChange"
    :handle-num-change="handleNumChange"
    @opera-btn-click="operaBtnClick"
  />
</template>

<script lang="ts" setup>
import { reactive, toRefs, h } from 'vue'
import { ElButton, ElSwitch } from 'element-plus'

interface ITableData{
  date:string
  name:string
  address:string
}
const renderHeader = function (name:string) {
  // @ts-ignore
  return ({ row, index, column }) => {
    let el:any = 'div'
    let data = {}
    const con = row[name]
    switch (name) {
      case 'date':
        el = ElButton
        break
      case 'status':
        el = ElSwitch
        data = {
          modelValue: row[name],
          onChange: ($event: boolean) => {
            row[name] = $event
          }
          // on: {
          //   change: (val:any) => {
          //     console.log(val, 111)
          //     row.status = !row.status
          //   }
          // }
        }
        break
    }
    return h(el, data, () => con)
  }
}
const tableOptions = reactive({
  tableData: [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
      status: true
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
      status: false
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
      status: true
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
      status: true
    }
  ],
  rowHeader: [
    {
      label: '名称',
      prop: 'name',
      width: 150,
      align: 'left'
    },
    {
      label: '时间',
      prop: 'date',
      sortable: 'custom',
      render: renderHeader('date')
    },
    {
      label: '状态',
      prop: 'status',
      render: renderHeader('status')
    },
    {
      label: '地址',
      prop: 'address'
    }
  ],
  queryInfo: {
    pageNum: 1,
    pageSize: 20
  },
  refreshTable: true,
  loading: false,
  total: 300,
  addBtnList: {
    label: '操作',
    width: 200,
    list: [
      {
        title: '修改',
        methods: 'modify',
        type: 'warning',
        text: true,
        directName: 'modify'
      },
      {
        title: '删除',
        methods: 'delete',
        type: 'danger',
        text: false,
        directName: 'delete'
      }
    ]
  },
  modify (scopeRow:any) {
    console.log(scopeRow, 'modify')
  },
  delete (scopeRow:any) {
    console.log(scopeRow, 'delete')
  },
  operaBtnClick (methodsWords:string, scope:any) {
    // @ts-ignore
    tableOptions[methodsWords](scope.row)
  },
  // pageSize 改变时会触发 每页条数
  handleSizeChange (pageSize:number) {
    tableOptions.queryInfo.pageSize = pageSize
  },
  // 当前页改变
  handleNumChange (pageNum:number) {
    tableOptions.queryInfo.pageNum = pageNum
  },
  // 单行数据选中
  selectRow (allSelect:Array<ITableData>, lastSelect:ITableData) {
    console.log(allSelect, lastSelect, '单选触发')
  },
  selectAllData (data:Array<ITableData>) {
    console.log(data, '全选触发')
  },
  // 排序
  sortChange (column:any) {
    console.log(column, 111)
    // tableOptions.tableData.sort(tableOptions.compare(column.prop, column.order))
  }
  // compare (prop, order) {
  //   console.log(prop, order, 1111)
  // }
})

const {
  tableData,
  rowHeader,
  addBtnList,
  operaBtnClick,
  queryInfo,
  total,
  refreshTable,
  loading,
  handleSizeChange,
  handleNumChange,
  selectRow,
  selectAllData,
  sortChange
} = toRefs(tableOptions)
</script>

<style scoped>

</style>
